<template>
  <div class="appwraper">
    <Swiper id="swiper" :options="swiperOption" ref="Swiper">
      <!-- swiper-no-swiping -->
      <Swiper-slide
        class="slide0 cover ignore swiper-no-swiping"
        bgSrc="static/imgs/bg.jpg"
      >
        <div class="fullPage">
          <div class="partPage">
            <img
              imgSrc="static/imgs/bg1.png"
              class="abs ani"
              swiper-animate-effect="fadeInUp"
              swiper-animate-duration="1s"
              swiper-animate-delay="0.5s"
              style="width: 86%; left: 7%; top: 150px"
            />
            <div
              @click="startBtn"
              class="abs ani"
              style="width: 50%; left: 25%; bottom: 120px"
              swiper-animate-effect="fadeInUp"
              swiper-animate-duration="1s"
              swiper-animate-delay="1.5s"
            >
              <img imgSrc="static/imgs/btn1.png" class="relt breathAni" />
            </div>
          </div>
        </div>
        <!-- <img imgSrc="static/imgs/logo.png" class="abs logo" /> -->
      </Swiper-slide>
      <Swiper-slide
        class="slide1 cover swiper-no-swiping"
        bgSrc="static/imgs/bg1a.jpg"
      >
        <div id="painting" class="fullPage fullbg">
          <!-- 未浇水 S -->
          <img
            imgSrc="static/imgs/bg1a.jpg"
            class="abs full icover"
            v-if="growStatus == 0"
          />
          <!-- 未浇水 E -->
          <!-- 浇水中 S -->
          <div class="videoView" v-if="growStatus <= 1">
            <video
              @ended="growEnd"
              ref="videoEl"
              x5-playsinline="true"
              playsinline="true"
              webkit-playsinline="true"
              x-webkit-airplay="true"
              x5-video-orientation="portraint"
              src="static/video/video.mp4"
            ></video>
            <!-- poster="static/imgs/bg1a.jpg" -->
          </div>
          <!-- 浇水中 E -->
          <!-- 浇水结束 S -->
          <img
            imgSrc="static/imgs/bg1b.jpg"
            class="abs full icover"
            v-show="growStatus == 2"
          />
          <!-- 浇水结束 E -->
          <!-- <img imgSrc="static/imgs/bg1.jpg" class="abs full" /> -->
          <div class="partPage">
            <transition name="fade">
              <div v-show="growStatus == 2">
                <div class="card c1" @click="selectBtn(1)">
                  <img imgSrc="static/imgs/g/g1.png" class="g" />
                  <img imgSrc="static/imgs/g/g1a.png" class="ga" />
                </div>
                <div class="card c2" @click="selectBtn(2)">
                  <img imgSrc="static/imgs/g/g2.png" class="g" />
                  <img imgSrc="static/imgs/g/g2a.png" class="ga" />
                </div>
                <div class="card c3" @click="selectBtn(3)">
                  <img imgSrc="static/imgs/g/g3.png" class="g" />
                  <img imgSrc="static/imgs/g/g3a.png" class="ga" />
                </div>
                <div class="card c4" @click="selectBtn(4)">
                  <img imgSrc="static/imgs/g/g4.png" class="g" />
                  <img imgSrc="static/imgs/g/g4a.png" class="ga" />
                </div>
                <img
                  v-show="!hasClick"
                  imgSrc="static/imgs/hand.png"
                  class="hand"
                />
              </div>
            </transition>
            <div
              v-show="growStatus == 0"
              @click="waterBtn"
              class="abs"
              style="width: 50%; left: 25%; bottom: 114px"
              swiper-animate-effect="fadeInUp"
              swiper-animate-duration="1s"
              swiper-animate-delay="1.5s"
            >
              <img imgSrc="static/imgs/btn4.png" class="relt" />
            </div>
          </div>
        </div>
      </Swiper-slide>
    </Swiper>
    <!--------------以下为公共定义区域------------------------------>
    <!-- 弹窗区域 S -->
    <transition name="fade">
      <div class="maskView flex" v-show="generBool">
        <div class="pimg">
          <img
            :src="`static/imgs/poster/p${posterVal}-${randomVal}.jpg`"
            class="relt"
          />
          <img
            imgSrc="static/imgs/btn2.png"
            class="ubtn u1"
            @click="generBtn"
          />
          <img imgSrc="static/imgs/btn3.png" class="ubtn u2" @click="backBtn" />
        </div>
      </div>
    </transition>
    <transition name="fade">
      <div class="maskView flex" v-show="posterBool">
        <div class="pimg">
          <img
            :src="`static/imgs/poster/p${posterVal}-${randomVal}.jpg`"
            class="relt"
          />
        </div>
        <img
          imgSrc="static/imgs/wd.png"
          class="stip bling"
          @click="ucloseBtn"
        />
        <img imgSrc="static/imgs/close.png" class="uclose" @click="ucloseBtn" />
      </div>
    </transition>
    <!-- 弹窗区域 E -->
    <!-- 弹窗区域 S -->
    <transition name="fade">
      <PopUp :popVal="popVal" v-if="popVal" @close="closePopUp"></PopUp>
    </transition>
    <!-- 弹窗区域 E -->

    <!-- TIPS 区域 START -->
    <div class="abs full" v-show="tipsBool" style="z-index: 99999">
      <transition name="slide">
        <div class="abs tipsView" v-show="tipsBool" id="tipsView" style="">
          <p class="tips" style="">{{ tipsWord }}</p>
        </div>
      </transition>
    </div>
    <!-- TIPS 区域 END -->
    <!-- 表单 区域 START-->
    <transition name="fade">
      <div v-show="formBool" class="maskView formView">
        <div class="fullPage flex"></div>
      </div>
    </transition>
    <!-- 表单 区域 END-->
    <!-- 音乐 区域 START -->
    <div
      v-show="playShow"
      :class="{ music: true, play: play }"
      @click="musicBtn"
    ></div>
    <!-- 音乐 区域 END -->
    <!-- loadingView 区域 START -->
    <transition name="fade">
      <div
        class="loadingView cover"
        style="bacground-image: url('static/imgs/bg.jpg')"
        v-show="sVisible"
      >
        <Loading type="larger"></Loading>
      </div>
    </transition>
    <!-- loadingView 区域 End -->
  </div>
</template>
<script>
import html2canvas from "static/js/html2canvas";
import ajaxService from "service/service";
import utils from "service/utils";
import wx from "weixin-js-sdk";
import Promise from "promise";
import $ from "jquery";
import _ from "underscore";
import vconsole from "vconsole";
window.wx = wx;
window.$ = $;
window.utils = utils;
let qd = utils.getUrlParam("qd") || "";
let debug = utils.getUrlParam("debug");
import baseCompent from "service/baseCompent";
import "jquery.transit";
export default {
  extends: baseCompent,
  data() {
    let that = this;
    return {
      generBool: false,
      posterBool: false,
      hasClick: false,
      posterVal: 0,
      randomVal: 0,
      growStatus: 0,
      popVal: 0, //0:不弹出，1:
    };
  },
  methods: {
    waterBtn() {
      this.growStatus = 1;
      this.$refs.videoEl.play();
      // this.$nextTick(() => {
      //   this.$refs.videoEl.play();
      // });
    },
    growEnd() {
      this.growStatus = 2;
    },
    selectBtn(pval) {
      this.hasClick = true;
      this.posterVal = pval;
      this.randomVal = _.random(1, pval == 3 ? 7 : 8);
      this.$nextTick(() => {
        this.generBool = true;
      });
    },
    popUpBtn(pval) {
      this.popVal = pval;
    },
    closePopUp(pval = 0) {
      this.popVal = pval;
    },
    generBtn() {
      this.posterBool = true;
    },
    ucloseBtn() {
      this.posterBool = false;
    },
    backBtn() {
      this.generBool = false;
    },
    startBtn() {
      this.slideToPage(1);
    },
    submitBtn() {
      let that = this;
      if (!that.name) {
        that.showTips("请输入姓名");
        return false;
      }
      /*if(that.name.gblen()>10){
                that.showTips('姓名长度过长');
                return false;
            }*/
      ajaxService.saveData().then((res) => {
        if (res.status != 1) {
          that.showTips(res.msg);
          return false;
        }
      });
    },
    formBtn() {
      this.formBool = true;
    },
    generImg(reset) {
      let that = this;
      html2canvas(document.getElementById("painting"), {
        useCORS: true,
        scale: 3,
        ignoreElements: (ele) => {
          if ($(ele).hasClass("ignore")) {
            return true;
          }
          return false;
        },
      }).then(function (canvas) {
        that.generImgUrl = canvas.toDataURL("image/jpeg");
      });
    },
  },
  mounted() {
    let that = this;
    this.$nextTick(function () {});
  },
  beforeCreate() {},
  created() {
    let that = this;
    //let ch = that.switchEN(qd);

    //let vConsole = new VConsole();
    if (debug) {
      let vs = new vconsole();
    }
    if (process.env.NODE_ENV !== "production") {
      setTimeout(function () {
        $(function () {
          that.startLoading();
        });
      });
      return false;
    }
    let p1 = new Promise((resolve, reject) => {
      $(resolve);
    })
      .then(() => {
        //that.loadVideo();
      })
      .catch((e) => {
        console.info(e);
      });
    ajaxService.getWxSign();
    /*var p2 = new Promise((resolve, reject)=>{
             ajaxService.getInit().then(function(res){
                resolve();
                that.$set(that.$data,'userInfo',res.data);
                ajaxService.getWxSign();
            });
        }).catch((e)=>{
            console.info(e);
        });*/
    Promise.all([p1])
      .then(() => {
        that.startLoading();
      })
      .catch((e) => {
        console.info(e);
      });
    /**/
  },
};
</script>

<style lang="less"></style>
